<template>
  <div>
    <el-card class="box-card">
      <!-- 卡片头信息 -->
      <div slot="header" class="clearfix">
        <i class="el-icon-menu"></i>
        <span>项目审核</span>
      </div>
      <!-- 模糊查询搜索框 -->
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入状态值" class="input-with-select" v-model="selectStatus" @clear="clearInp" clearable>
          <template slot="prepend">审核状态值查询</template>
        </el-input>
        <el-button slot="append" type="primary" icon="el-icon-search" @click="selectAllLikeStatusPage">搜索</el-button>
		<span style="padding-left: 30px; color: red; font-size: 14px; display: inline-block">*0:待审核; 1:审核通过; 2:未通过审核</span>
      </div>
      <el-divider></el-divider>
      <!-- 表格 -->
      <div style="margin-top: 30px">
        <el-table :data="itemList" border style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="iname" label="项目名称" width="300"></el-table-column>
          <el-table-column prop="iintro" label="项目介绍" width="300"></el-table-column>
          <el-table-column prop="itemMan.mshow" label="发起人" width="300"></el-table-column>
          <el-table-column prop="amoney" label="目标金额(元)"></el-table-column>
          <el-table-column prop="idays" label="众筹周期(天)"></el-table-column>
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <div v-show="scope.row.status == '0'"> <span style="color: yellowgreen;font-weight: bold;">待审核</span> </div>
              <div v-show="scope.row.status == '1'"> <span style="color: blue;font-weight: bold;">已通过审核</span> </div>
              <div v-show="scope.row.status == '2'"> <span style="color: red;font-weight: bold;">未通过审核</span> </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-search" @click="showItem(scope.row.iid)"></el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- 分页 -->
      <center style="margin-top: 30px">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="this.listTotal" :page-size="5" :current-page="pageNum" @current-change="pageNumChange">
        </el-pagination>
      </center>
    </el-card>

    <!-- 详情弹框 -->
    <el-dialog title="项目详情信息" :visible.sync="dialogFormVisible">
      <el-descriptions title="项目信息" :data="itemShow" :column=1>
          <el-descriptions-item label="项目名称">
            <el-tag size="small">{{itemShow.iname}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目介绍">
            <el-tag size="small">{{itemShow.iintro}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="目标金额">
            <el-tag size="small">{{itemShow.amoney}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="筹集天数">
            <el-tag size="small">{{itemShow.idays}}</el-tag>
          </el-descriptions-item>
        <el-descriptions-item label="发起人信息">
            <el-tag size="small">{{itemShow_itemMan.mshow}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发起人电话">
            <el-tag size="small">{{itemShow_itemMan.mtel}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客服电话">
            <el-tag size="small">{{itemShow_itemMan.msertel}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="收款账号">
            <el-tag size="small">{{itemShow_itemMan.inmoneynum}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="法定代表人身份证号">
            <el-tag size="small">{{itemShow_itemMan.statusnum}}</el-tag>
          </el-descriptions-item>
        <el-descriptions-item label="项目头图">
          <el-image style="width: 120px; height: 120px" :src="imgURL+itemShow.iimg"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="项目详细图">
          <el-image style="width: 120px; height: 120px" :src="imgURL+itemShow.ishowimg"></el-image>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer" v-show="itemShow.status == '0'">
        <el-button type="primary" @click="dialogFormVisible = false" round>返回</el-button>
        <el-button type="success" @click="statusChange(itemShow.iid)" round>审核通过</el-button>
        <el-button type="danger" @click="statusNotGo(itemShow.iid)" round>审核不通过</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-show="itemShow.status == '1' || itemShow.status == '2'">
        <el-button type="primary" @click="dialogFormVisible = false" round>返回</el-button>
      </div>
    </el-dialog>


    <el-dialog title="未通过原因" :visible.sync="notFormVisible">
      <el-form :rules="notShowRules" :model="addNotShow">
        <el-form-item label="未通过原因" :label-width="formLabelWidth" prop="notShowR">
          <el-input v-model="addNotShow.notShowR" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="notShowY">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data(){
    return{
      selectStatus:"",
      pageNum:1,
      itemList:[],
      listTotal:0,
      dialogFormVisible:false,
      itemShow:{},
      itemShow_itemMan:{},
      imgURL: 'http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=',
      formLabelWidth: "120px",
      notFormVisible: false,
      iid: 0,
      notShowRules: {
        notShowR:[
          {required: true, message: '项目名称不能为空', trigger: 'blur'},
          {min: 3, max: 12, message: '项目名称长度在 3 到 12 个字', trigger: 'blur'}
        ]
      },
      addNotShow: {
        notShowR:""
      }
    }
  },
  methods:{
    async selectAllLikeStatusPage(){
      let param = new URLSearchParams();
      param.append("pageNum",this.pageNum);
      param.append("status",this.selectStatus);
      let res = await this.$http.post("selectAllLikeStatusPage",param);
      if (res.data.code==200) {
        this.itemList = res.data.data.list;
        this.listTotal = res.data.data.total;
      }
    },
    async showItem(iid){
      let res = await this.$http.get("selectItemByIid?iid="+iid);
      if (res.data.code == 200) {
        this.dialogFormVisible=true
        this.itemShow=res.data.data;
        this.itemShow_itemMan=res.data.data.itemMan;
      }
    },
    async statusChange(iid) {
      let res = await this.$http.get("updateItemStatusByIid?iid="+iid);
      if (res.data.code == 200) {
        this.$message.success(res.data.message);
        await this.selectAllLikeStatusPage();
        this.dialogFormVisible = false
      }
    },
    async statusNotGo(iid) {
      this.notFormVisible = true;
      this.iid = iid;
    },
    clearInp() {
      this.selectAllLikeStatusPage();
    },
    pageNumChange(newPageNum) {
      this.pageNum = newPageNum;
      this.selectAllLikeStatusPage();
    },
    async notShowY() {
      let param = new URLSearchParams();
      param.append("iid",this.iid);
      param.append("notshow",this.addNotShow.notShowR);
      let res = await this.$http.post("updateStatusByIid",param);
      if (res.data.code == 200) {
        this.$message.success("已拒绝通过审核");
        await this.selectAllLikeStatusPage();
        this.iid = "";
        this.addNotShow.notShowR = "";
        this.notFormVisible = false;
        this.dialogFormVisible = false;
      }
    }
  },
  mounted() {
    this.selectAllLikeStatusPage();
  }
}
</script>

<style scoped="scoped">
  .el-input{
    width: 25% !important;
  }
  .cell{
    font-size: 16px;
  }
  .dialog-footer{
    text-align: center;
  }

</style>